<template>
  <view>
    <view class="title">{{ detail.title }}</view>
    <view class="tag" v-if="detail.tagList && detail.tagList.length">
      <view class="items" v-for="(item, index) in detail.tagList" :key="index">{{ item.name }}</view>
    </view>
    <view class="des">{{ detail.profile }}</view>
    <view class="price">
      <view class="number">¥ {{ detail.price }}</view>
      <view class="initer" v-if="detail.integral_deduction_enable">
        <view class="icon">
          <image src="../../static/initer.png" class="img"></image>
        </view>
        <view class="font">积分可抵{{ detail.integral_deduction_amount }}</view>
      </view>
    </view>
    <view class="line">
      <uv-line color="#EFEFEF"></uv-line>
    </view>
    <view class="Lecture" v-if="detail.lecturer" @click="goUser(detail.lecturer)">
      <avatar :src='setUrl(detail.lecturer.avatar)' styles='width: 83rpx; height: 83rpx;'></avatar>
      <view class="name">{{ detail.lecturer.nickname }}</view>
    </view>
    <view class="summary" v-if="detail.lecturer">{{ detail.lecturer.bio }}</view>
    <view class="big">课程介绍</view>
    <view class="content">
      <uv-parse :content="detail.details" :show-img-menu='false'></uv-parse>
    </view>
    <view class="big" style="padding-bottom: 0;">课程评价</view>
    <view class="comment" v-if="comment.length">
      <view class="item" v-for="(item,index) in comment" :key="index">
        <view class="hd">
          <view class="user">
            <avatar :src='setUrl(item.avatar)' styles='width: 63rpx; height: 63rpx;'></avatar>
            <view class="name">{{ item.nickname }}</view>
          </view>
          <view class="time">{{ item.pushtime }}</view>
        </view>
        <view class="body">{{ item.content }}</view>
      </view>
    </view>
    <!-- <view style="font-size: 26rpx;padding: 50rpx 0; text-align: center;" v-if="comment.length == 0">暂无评价</view> -->
  </view>
</template>

<script setup>
import { setUrl } from '@/common';
const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  },
  comment: {
    type: Array,
    default: () => []
  }
})

function goUser(row){
  // #ifdef WEB
  return;
  // #endif
  uni.navigateTo({
    url: `/pages/mine/official/index?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .comment{
    padding: 0 30rpx;
    .item{
      padding: 50rpx 0;
      border-bottom: 1px solid #EFEFEF;
      &:last-child{
        border-bottom: 0;
      }
      .body{
        font-weight: 400;
        font-size: 26rpx;
        color: #000000;
      }
      .hd{
        width: 100%;
        padding-bottom: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .time{
          font-weight: 400;
          font-size: 26rpx;
          color: #8A8A8A;
        }
        .user{
          display: flex;
          align-items: center;
          .name{
            font-weight: 500;
            font-size: 26rpx;
            color: #000000;
            padding-left: 18rpx;
          }
        }
      }
    }
  }
  .content{
    width: 100%;
    padding-bottom: 50rpx;
  }
  .big{
    padding-left: 30rpx;
    padding-top: 34rpx;
    padding-bottom: 34rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #2B2B2B;
  }
  .summary{
    font-weight: 400;
    font-size: 24rpx;
    color: #808080;
    padding: 0 30rpx;
  }
  .Lecture{
    width: 100%;
    padding: 40rpx 30rpx;
    display: flex;
    align-items: center;
    .name{
      font-weight: 500;
      font-size: 26rpx;
      color: #000000;
      padding-left: 16rpx;
    }
  }
  .line{
    padding: 0 30rpx;
  }
  .price{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 30rpx;
    padding-top: 24rpx;
    padding-bottom: 38rpx;
    .initer{
      display: flex;
      align-items: center;
      .font{
        font-weight: 400;
        font-size: 24rpx;
        color: #E43222;
        padding-left: 10rpx;
      }
      .icon{
        width: 24rpx;
        height: 24rpx;
        font-size: 0;
      }
    }
    .number{
      color: #e43222;
      font-size: 30rpx;
    }
  }
  .des{
    font-weight: 400;
    font-size: 24rpx;
    color: #808080;
    padding: 0 30rpx;
  }
  .tag{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0 30rpx;
    padding-top: 12rpx;
    padding-bottom: 30rpx;
    .items{
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 44rpx;
      padding: 0 30rpx;
      background-color: #F0F0F0;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }
  .title{
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;
    padding: 34rpx 30rpx;
  }
</style>